<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				margin-top: 100px;
			}
			.earth-rotate{
				margin: 0 auto;  /* 横向居中 */
				width: 520px;
				height: 520px;
				
				/* 设置背景图片 url属性指向图片，url里面不需要双引号括起来，直接写 */
				background: url(img/earth.png) no-repeat;
				
				/* 圆角 */
				border-radius: 160px;
				
				/* 旋转，
					谷歌浏览器提供动画，
					run动画名称，5s 执行一遍耗时，
					旋转轨迹：linear 线型
					0s 播放前过渡时间，infinite 无限次循环
				 */
				-webkit-animation: run 5s linear 0s infinite;
			}
			/* 谷歌浏览器提供关键帧写法 */
			@-webkit-keyframes run{
				/* 0~360 旋转一周 */
				from{ -webkit-transform: rotate(0deg); }
				to{ -webkit-transform: rotate(360deg); }
			}
			.earth-rotate:hover{
				/* 暂停动画播放，play-state */
				-webkit-animation-play-state: paused;
			}
		</style>
	</head>
	<body>
		<div class="earth-rotate"></div>
	</body>
</html>
